<template>
  <div class='container'>
    <el-card class="box-card">
      黄莹莹
      <div v-if="subjectName" slot="header" class="clearfix">
        <span>学科管理
          <i class="el-icon-arrow-right right"></i>
          {{$route.query.name}}
          <i class="el-icon-arrow-right right"></i>
          标签管理
        </span>

      </div>
       <!-- 搜索 -->
        <SubjectTags
        ref="searchTags"
        :total="total"
         :directoryDetail.sync="directoryDetail"
          @getDirectoryList="searchDirectory"
           @getDirectory="loadDirectorysList"
           :pageData="pageData"
           @clickSearch="onClickSearch"
           @getTotal="total=$event"

           :subjectName="subjectName"
            />
            <!-- :formDate="form" -->
      <div class="text item">
        <!-- 表格 -->
        <el-table
          :data="tableData"
          style="width: 100%"
          :cell-style="{height:'67px'}"
          >
          <el-table-column
            type="index"
            label="序号"
            width="80">
          </el-table-column>
          <el-table-column
            prop="subjectName"
            label="所属学科"
            width="287">
          </el-table-column>
          <el-table-column
            prop="tagName"
            label="标签名称"
            width="286">
          </el-table-column>
          <el-table-column
            prop="username"
            label="创建者"
            width="286">
          </el-table-column>
          <el-table-column
            prop="addDate"
            label="创建日期"
            width="286"
            >
            <template v-slot="{row}">
              {{row.addDate | parseTimeByString}}
            </template>
          </el-table-column>
          <el-table-column
            prop="state"
            label="状态"
            width="286"
            :formatter="formatterData"
            >
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template v-slot="{row}">
              <el-button type="text" @click="clickDisplay(row)">{{row.state ? '禁用' : '启用'}}</el-button>
              <el-button type="text" @click="onEditClick(row)" :disabled="row.state===1">修改</el-button>
              <el-button type="text" @click="onDelClick(row)" :disabled="row.state===1">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageData.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pageData.pagesize"
          layout="prev, pager, next,sizes, jumper"
          :total='total'
          :hide-on-single-page="flag"
          >
        </el-pagination>
      </div>
    </el-card>
    <TagsEdit v-if="editSubjectDialog"
     :editSubjectDialog.sync="editSubjectDialog"
      :directorysInfo="editInfo"
      @getDirectory="loadDirectorysList"
      :subjectName="subjectName"/>
  </div>
</template>

<script>
import SubjectTags from '../components/subjects-tags.vue'
import { list, changeState, remove } from '@/api/hmmm/tags.js'
import TagsEdit from '../components/tags-edit.vue'
export default {
  data () {
    return {
      subjectName: this.$route.query.id, // 学科id
      tableData: [], // 表格数据
      pageData: { // 分页数据
        page: 1,
        pagesize: 10
      },
      total: 0, // 总条数
      flag: true, // 判断分页显示隐藏
      editSubjectDialog: false, // 控制修改目录对话框显示隐藏
      editInfo: {}, // 目录信息
      btnClick: '禁用', // 禁用/启用文字
      directoryDetail: {}, // 目录名称
      searchBtn: false,
      form: {}
    }
  },
  components: {
    SubjectTags,
    TagsEdit
  },
  created () {
    this.loadDirectorysList()
  },
  methods: {
    // 加载目录列表
    async loadDirectorysList () {
      if (this.$route.query && this.$route.query.id) {
        this.pageData.subjectID = this.$route.query.id
        const res = await list({ ...this.form, ...this.pageData })
        this.total = res.data.counts
        this.tableData = res.data.items
      } else {
        this.getDirectoryDetailList()
      }
      if (this.total === 1 && this.tableData[0]) {
        this.directoryDetail = this.tableData[0]
      }
      if (this.total > 10) {
        this.flag = false
      }
    },
    // 格式化状态
    formatterData (val) {
      return val.state ? '已启用' : '已禁用'
    },
    // 禁用
    async clickDisplay (row) {
      row.state = row.state ? 0 : 1
      await changeState({ id: row.id, state: row.state })
      this.btnClick = row.state ? '禁用' : '启用'
    },
    // 点击每页条数
    handleSizeChange (val) {
      this.pageData.pagesize = val
      this.pageData.page = 1
      console.log(this.searchBtn)
      if (this.$route.query.id) {
        this.loadDirectorysList({ ...this.form, ...this.pageData })
      } else {
        this.getDirectoryDetailList()
      }
    },
    // 点击页码数
    handleCurrentChange (val) {
      this.pageData.page = val
      if (this.$route.query.id) {
        this.loadDirectorysList({ ...this.form, ...this.pageData })
      } else {
        this.getDirectoryDetailList()
      }
    },
    // 修改目录
    onEditClick (row) {
      this.editSubjectDialog = true
      this.editInfo = row
    },
    // 点击删除
    onDelClick (row) {
      this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({ id: row.id, state: null })
        this.loadDirectorysList(this.pageData)
        this.$message.success('亲，删除成功哟 !')
        this.$refs.searchTags.onClear()
      }).catch(() => {
      })
    },
    // 搜索目录
    searchDirectory (data) {
      this.pageData.page = 1
      this.tableData = data
    },
    // 获取目录列表
    async getDirectoryDetailList () {
      if (!this.form.directoryName) {
        const { data } = await list({ ...this.pageData })
        this.tableData = data.items
        this.total = data.counts
      } else {
        const { data } = await list({ ...this.form, ...this.pageData })
        this.tableData = data.items
        this.total = data.counts
      }
    },
    // 点击了搜索之后
    onClickSearch (form) {
      this.form = form
      if (!form.tagName) {
        this.pageData.page = 1
      }
    },
    currentChange () {

    }
  }
}
</script>

<style scoped lang='less'>
   .container {
  padding: 10px;
  .box-card {
    font-size: 14px;
    .el-pagination {
      display: block;
    text-align: right;
    margin-top: 20px;
    /deep/.el-pagination__jump {
      margin-left: 0px;
    }
  }
  }
 }
 /deep/.box-card{
  width: 100% !important;
 }
  /deep/.right {
     color: #c0c4cc !important;
  }
  .text {
  font-size: 14px;
  }

  .item {
   margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
   display: table;
   content: "";
 }
 .clearfix:after {
  clear: both
 }
 .box-card {
  width: 100%;
 }
</style>
